<template>
  <div class="login">
    <van-nav-bar
      left-arrow
      :border="false"
      @click-left="goBack"
    />
    <p class="title">短信登录</p>
    <van-form @submit="onLogin">
      <!-- autocomplete: off 关闭输入框的提示(原生属性) -->
      <van-field
        v-model="tel"
        name="手机号"
        placeholder="请输入手机号"
        autocomplete="off"
        :rules="[{ 
          pattern: pattern4tel,
          required: true, 
          message: '请填写正确的手机号',
        }]"
      />
      <van-field
        v-model="code"
        name="验证码"
        placeholder="请输入验证码"
        autocomplete="off"
        :rules="[{ 
          pattern: pattern4code,
          required: true, 
          message: '请填写正确的验证码',
        }]"
      >
        <template #extra>
          <span  
            v-if="!sendingCode"
            class="send-code"
            @click="sendCode"
          >
            发送验证码
          </span>
          <van-count-down 
            v-else 
            format="ss秒"
            :time="countDown" 
            @finish="onCountDownFinish"
          />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button 
          :loading="loading"
          block 
          color="linear-gradient(-45deg, rgb(255, 100, 0), rgb(255, 40, 0))"
          native-type="submit"
        > 
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import * as api from '@/api/login';

export default {
  data () {
    return {
      // 是否登录中
      loading: false,
      // 反显手机号
      tel: localStorage.getItem('tel') || '',
      code: '246810',
      // 手机号正则  pattern for tel
      pattern4tel: /^[1][3,5,7,8][0-9]\d{8}$/,
      // 验证码正则
      // ^匹配开始
      // $匹配结束
      // \d数字
      // {6} 6个
      pattern4code: /^\d{6}$/,
      // 倒计时
      countDown: 60000,
      // 是否正在发送验证码
      sendingCode: false,
    };
  },
  methods: {
    // 回退
    goBack () {
      // 回到上一级 而不是首页
      this.$router.go(-1);
    },
    // 倒计时结束
    onCountDownFinish () {
      this.countDown = 60000;
      this.sendingCode = false;
    },
    // 登录
    onLogin () {
      // loading
      this.loading = true;
      // 发请求
      // 记录手机号
      // 记录token
      api.login(this.tel, this.code)
      .then(res => {
        // data & message
        // 记手机号
        localStorage.setItem('tel', this.tel);
        // 记token
        localStorage.setItem('token', res.data.token);
        // 提示
        this.$notify({
          type: 'success',
          message: res.message,
        });
        // 跳回上一级页面
        this.goBack();
      })
      .catch(() => {
        this.$notify({
          type: 'danger',
          message: '发送失败',
        });
      })
      // 不管成功还是失败都会走到这里
      .finally(() => {
        this.loading = false;
      });
    },
    // 发送验证码
    async sendCode () {
      const msg = await api.getCode(this.tel);
      if (msg) {
        this.sendingCode = true;
      }
      this.$notify({
        type: msg ? 'success' : 'danger',
        message: msg || '发送失败',
      });
    },
  },
}
</script>

<style scoped>
.title {
  font-size: 20px;
  margin: 48px 32px;
}
.send-code {
  color: #ccc;
}
</style>